<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
    <style>
        .div {
            width:100px;
            height: 100px;;
        }
        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul id="otherList">
        <li id="other-1">aaa</li>
    </ul>
    <hr />

    <ul id="myList">
        <li id="m1">首页</li>
        <li id="m2">企业介绍</li>
    </ul>
    <hr />

    <input type="text" name="userName" value="aaa" />
    <input type="text" name="userName-1" />
    <hr />

    <p class="text-show">AAAA</p>
    <p class="text-show-1">BBBB</p>

    <hr />
    <div id="show-div" class="div red"></div>
    <button id="change">改变</button>

    <script>
        //===========ID选择=====================
        let ul = document.getElementById('myList');
        console.log(ul);

        let m1 = document.getElementById('m1');
        console.log(m1);
        m1.innerHTML = "首页2222";

        //===========标签选择=====================
        let items = document.getElementsByTagName("li");
        console.log(items);
        for (let obj of items) {
            console.log(obj.innerHTML);
        }

        //===========指定节点下的标签选择=====================
        items = ul.getElementsByTagName("li");
        console.log(items);
        for (let obj of items) {
            console.log(obj.innerHTML);
        }

        //===========名称选择=====================
        items = document.getElementsByName("userName");
        console.log(items);
        for (let obj of items) {
            console.log(obj.value);
            obj.value = "new text";
        }

        //============类选择====================
        items = document.getElementsByClassName("text-show");
        console.log(items);
        for (let obj of items) {
            // console.log(obj.textContent);
            console.log(obj.innerHTML);
        }

        //============通用选择器====================
        items = document.querySelectorAll('p');
        for (let obj of items) {
            console.log(obj.innerHTML);
        }

        let item = document.querySelector('p');
        console.log(item.innerHTML);

        //================================
        items = ul.querySelectorAll('li');
        for (let obj of items) {
            console.log(obj.innerHTML);
        }

        item = ul.querySelector('li');
        console.log(item.innerHTML);

        //================================
        m1 = document.querySelector('#m1');
        console.log(m1.innerHTML);

        items = document.querySelectorAll('ul li');
        for (let obj of items) {
            obj.style = "color: red;";
        }

        //================================
        let btn = document.getElementById("change");
        btn.onclick = (event) => {
            let obj = document.getElementById("show-div");
            if (obj.className === "div red") {
                obj.className = "div blue"
            } else {
                obj.className = "div red"
            }
        }

    </script>
</body>

</html>